<template>
<div class="recommend" ref="recommend">
<scroll class="recommend-content" :data="discList" ref="scroll">
<div>
<li v-if="recommendList" class="slidePic">
 <swiper :options="swiperOption" ref="mySwiper">
        <!-- 绑定配置 -->
        <swiper-slide v-for="slide in recommendList" :key="slide.id">
        <img @load="loadImage" class="pic" :src="slide.picUrl "> </swiper-slide>
        <!-- 控制组件 dot,滚动条,next,prev -->
        <div class="swiper-pagination" slot="pagination" ></div>
    </swiper>
</li>
<div class="singlist">
 <div class="center tip xl">热门歌单推荐</div>
<li @click="selectItem(item)" class="item flex" v-for="item in discList" :key="item.key">
  <img  v-lazy="item.imgurl" class="singpic ml10 mr10">
  <div class="cell-main ">
    <div class="l mb5">{{item.creator.name}}</div>
    <div class="over l hui desc">{{item.dissname}}</div>
  </div>
</li>
</div>
</div>
<div class="loading-container" v-show="!discList.length">
  <loading></loading>
</div>
</scroll>
<router-view></router-view>
</div>
</template>

<script type="text/ecmascript-6">
 import {getRecommend,getDiscList} from 'api/recommend'
 import { swiper, swiperSlide } from 'vue-awesome-swiper'
 import {ERR_OK} from 'api/config'
 import scroll from 'base/scroll/scroll'
 import loading from 'base/loading/loading'
 import {playlistMixin} from 'common/js/mixin'
 import {mapMutations} from 'vuex'
export default{
  name:'',
      mixins: [playlistMixin],
  data(){
  	 return {
  	 	recommendList:[],
      discList:[],
        swiperOption: {
            autoplay: true,
            pagination: {
                el: '.swiper-pagination',
            }
            }
        }
  },
  created(){
  	this._getRecommend()
    this._getDiscList()
  },
  methods:{
       handlePlaylist(playlist){
      const bottom=playlist.length>0?'60px':'';
      this.$refs.recommend.style.bottom=bottom;
      this.$refs.scroll.refresh()
    },
    selectItem(item){
    this.$router.push({
      path:`/recommend/${item.dissid}`
    })
    this.setDisc(item)
    },
  	 _getRecommend () {
        getRecommend().then(res => {
          if (res.code === ERR_OK) {
            this.recommendList = res.data.slider
          }
        })
      },
    _getDiscList() {
        getDiscList().then(res => {
          if (res.code === ERR_OK) {
            this.discList = res.data.list;
          }
        })
      },
      loadImage(){
         if (!this.checkedload) {
        this.$refs.scroll.refresh();
        this.checkedload = true
        }
      },
      ...mapMutations({
        setDisc:'SET_DISC'
      })
  },
  components:{
  	swiper,
    swiperSlide,scroll,loading
  }
}
</script>

<style rel="stylesheet" lang="less">
.slidePic,.pic,.swiper-slide{
	width: 100%;
	height:175px;
}
.tip{
	padding-top: 1rem;
	color: #ffcd32;
}
.singpic{
  width: 60px;
  height: 60px;
  flex:0 0 60px;
}
.desc{
  line-height: 1.5;
}
// 滚动首先定位,子元素overhidden
.recommend{
    position: fixed;
    width: 100%;
    top: 88px;
    bottom: 0;
}
.recommend-content{
  height: 100%;
  overflow: hidden;
}
.loading-container{
  position: absolute;
  width: 100%;
  top: 50%;
  transform:translateY(-50%)
}
</style>
